<template>
	<view class="product" v-if="show">
		<swiper class="swiper" circular indicator-dots="indicatorDots" autoplay="autoplay">
			<swiper-item v-for="(item,i) in goodsData[selectedNum].img" :key="i" >
				<view>
					<image :src="item.img" style="width:100%;" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="pInfo">
			<xgMoney camel :money="goodsData[selectedNum].price?goodsData[selectedNum].price:0" class="xgMoney" weight="bold" size="42rpx"></xgMoney>
			<view class="title">
				<u18ellipsis lineNum="2" :text="goodsData[selectedNum].gname" w="100%" style="font-weight: bold;"></u18ellipsis>
			</view>
		</view>
		
		<view style="padding:0 30rpx">
			<view class="item" @click="selectSku">
				<span style="margin-right:30rpx;font-size:28rpx;font-weight: bold;">已选</span>
				<span style="font-size:28rpx;color:#111;">{{goodsData[selectedNum].sname}}，{{goodsNum}}个</span>
			</view>
			<view class="item">
				<span style="margin-right:30rpx;font-size:28rpx;font-weight: bold;">重量</span>
				<span style="font-size:28rpx;color:#111;">0.33kg</span>
			</view>
		</view>
	</view>
	<view class="sku" v-if="skuShow">
		<u18overlay>
			<view class="skupopup">
				<view style="width:30rpx;margin-left:640rpx;color:red;" @click="closeSkuShow">
					x
				</view>
				<view style="display:flex;align-items: center;justify-content: space-between;">
					<leftAndRightFlex style="width:350rpx">
						<template v-slot:left>
							<image :src="goodsData[selectedNum].img[0].img" style="width:180rpx;height:180rpx;"></image>
						</template>
						<template v-slot:right>
							<view style="display:flex;height:160rpx;color:red;align-items: flex-end;">
								<xgMoney camel :money="goodsData[selectedNum].price?goodsData[selectedNum].price:0" class="xgMoney" weight="bold" size="42rpx"></xgMoney>
							</view>
						</template>
					</leftAndRightFlex>
					<view style="height:30rpx;margin-right:30rpx;">
						<uni-number-box v-model="goodsNum"></uni-number-box>
					</view>
				</view>
				<u18skuSelect :skuData="goodsData" @handlerSelect="select" :checkI="selectedNum"></u18skuSelect>
				<u18btn bc="#fa4319" fc="#fff" style="position:absolute;width:250rpx;bottom:100rpx;left:25%;transform: translateX(-50%);" @click="joinCart">加入购物车</u18btn>
				<u18btn bc="#fa4319" fc="#fff" style="position:absolute;width:250rpx;bottom:100rpx;left:75%;transform: translateX(-50%);" @click="nowBuy">立即购买</u18btn>
			</view>
		</u18overlay>
	</view>
	
</template>

<script setup>
	import {ref} from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import xgMoney from '../components/xgMoney.vue'
	import u18ellipsis from '../components/18ellipsis.vue'
	import u18overlay from '../components/18overlay.vue'
	import u18skuSelect from '../components/18skuSelect.vue'
	import leftAndRightFlex from "../components/leftAndRightFlex.vue";
	import u18btn from '../components/18btn.vue'
	import http from '../components/http.js'
	const goodsData = ref([])
	const goodsImg = ref([])
	const selectedNum = ref(0)
	const skuShow = ref(false)
	const show = ref(false)
	const goodsId = ref(0)
	const goodsNum = ref(1)
	onLoad((options)=>{
		console.log(options.id)
		goodsId.value = options.id
		http.http({url:`/goods/queryByid?id=${options.id}`,method:'GET'}).then(res=>{
			console.log(res)
			goodsData.value = res.data.data
			console.log(goodsData.value,'goodsData.value')
			// goodsImg.value = res.data.data[0].img.split(',')
			show.value = true
		})
	})
	function selectSku(){
		setTimeout(()=>{
			skuShow.value = true
		},100)
	}
	function select(i){
		selectedNum.value = i
	}
	function confirm(){
		skuShow.value = false
	}
	function joinCart(){
		skuShow.value = false
		http.http({url:'/cart/add',method:'POST',data:{goodsSkuId:goodsData.value[selectedNum.value].sid,goodsNum:goodsNum.value,userId:1,selected:1}}).then(res=>{
		})
	}
	function nowBuy(){
		skuShow.value = false
		uni.navigateTo({
			url:`/pages/orderPay?sid=${goodsData.value[selectedNum.value].sid}&goodsNum=${goodsNum.value}`
		})
	}
	function closeSkuShow(){
		skuShow.value = false
	}
</script>

<style>
	.swiper{
		margin-bottom:30rpx;
	}
	.pInfo{
		padding:30rpx;
	}
	.title{
		height:100rpx;
		margin:30rpx 0;
	}
	.item{
		height: 100rpx;
		line-height: 100rpx;
		border-bottom:2rpx solid #f8f8f8;
	}
	.sku{
		position: fixed;
		left:0;
		top:0;
		width:100%;
	}
	.skupopup{
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		height:70vh;
		padding:30rpx;
		background: #fff;
		border-radius:20rpx 20rpx 0 0;
		box-sizing: border-box;
	}
</style>